<template>
  <div class="screenB">
  
    <transition
    name="custom-classes-transition"
    enter-active-class="animated bounceInLeft"
    leave-active-class="animated bounceOutRight">
      <keep-alive>
        <component v-bind:is="view"></component>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import GovernmentMain from './view/government/governmentMain'
import HospitalB from './view/hospital/hospitalB.vue'
import GovernmentB from './view/government/governmentB.vue'
import IndustryB from './view/industry/industryB.vue'
import WaterB from './view/water/waterB.vue'
export default {
  name: 'screenB',
  data () {
    return {
      msg: 'bbb', 
      ws: null,
      sysId: '0'
    }
  },
  mounted: function () {
    this.receiveSysid()
  },
  computed: {
    view: function () {
      return 'b-' + this.sysId
    }
  },
  methods: {
    receiveSysid: function() {
      var socket = new WebSocket("ws://"+wsaddress+"/vqdisplay/pageswitch/b")
      this.ws = socket;
      socket.onmessage = this.wsOnMessage;
    },
    wsOnMessage: function (e) {
      this.sysId = e.data;
    }
  },
  components: {
    'b-0':  GovernmentMain,
    'b-1':  HospitalB,
    'b-2':  GovernmentB,
    'b-3': IndustryB,
    'b-4': WaterB,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   
.screenB {
  margin: 0;
  padding: 0;
  
}
.screenb1, .screenb2 {
  position: absolute;
  
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  background-color: #258846!important;
}
.screenb2 {
  background-color: #2d94da
}
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低于 2.1.8 版本中 */ {
  opacity: 0;
}
</style>
